<template>
	<div>
		<Navigation></Navigation>

		<div style="height: 600px;margin-top: 20px;" align="center">
			<div style="height: 400px;width: 60%;display: inline-block;">
				<div style="margin-top: 10px;margin-left: 2.5%;margin-right: 2.5%;">
					<el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
						<el-step title="注册"></el-step>
						<el-step title="注册成功"></el-step>
					</el-steps>
					
					<el-result icon="success" title="注册成功" v-if="active==2">
					      <template slot="extra">
					        <el-button type="primary" size="medium" onclick="window.location.href='http://localhost:80'">前往主页</el-button>
					      </template>
					    </el-result>

					<el-form v-if="active==1" :model="aviationUser" ref="aviationUser" :rules="rules" class="demo-ruleForm">
						<div style="width: 35%;margin-top: 20px;">
							<el-form-item prop="user_name" :rules="[
							  { required: true, message: '请输入邮箱地址', trigger: 'blur' },
							  { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
							]">
								<el-input placeholder="请输入邮箱地址" v-model="aviationUser.user_name"></el-input>
							</el-form-item>

							<el-row style="margin-top: 20px;">
								<el-col :span="16">
									<el-form-item prop="verificationCode" :rules="[
							             { required: true, message: '请输入邮箱验证码', trigger: 'blur' },
							             { min: 6 ,max: 6, message: '请输入正确的验证码', trigger: ['blur', 'change'] }
							        ]">
										<el-input placeholder="请输入邮箱验证码"
											v-model="aviationUser.verificationCode"></el-input>
									</el-form-item>

								</el-col>
								<el-col :span="8" style="text-align: right;"><el-button type="primary"
										style="width: 90%;" @click="sendVerificationCode('aviationUser')"
										:loading="loadingCose">{{codeButton}}</el-button></el-col>
							</el-row>

							<el-form-item prop="phone">
								<el-input placeholder="请输入手机号码" v-model="aviationUser.phone"></el-input>
							</el-form-item>

							<el-form-item prop="user_password">
								<el-input type="password" placeholder="请输入密码(密码为8-16位，并且包含字母数字特殊字符)"
									v-model="aviationUser.user_password"></el-input>
							</el-form-item>

							<el-form-item prop="confirmPassword">
								<el-input type="password" placeholder="请再次输入密码"
									v-model="aviationUser.confirmPassword"></el-input>
							</el-form-item>

							<el-button type="primary" style="width: 100%;height: 50px;font-size: 18px;font-weight: 900;"
								:loading="loading" @click="aviationLogon('aviationUser')">{{logonButton}}</el-button>
						</div>
					</el-form>
				</div>
			</div>
		</div>
		
		<BottomNavigation></BottomNavigation>

	</div>
</template>

<script>
	import axios from 'axios';
	import Navigation from "../components/Navigation"
	import BottomNavigation from "../components/BottomNavigation"

	export default {
		data() {
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.aviationUser.user_password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else if (!this.aviationUser.user_password.match(this.patt)) {
					callback(new Error('密码格式不正确，密码为8-16位，并且包含字母数字特殊字符!'));
				} else {
					callback();
				}
			};
			var validatePhone = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入手机号码'));
				} else if (!this.aviationUser.phone.match(this.pattPhone)) {
					callback(new Error('手机号格式不正确'));
				} else {
					callback();
				}
			};
			return {
				patt: /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[@#$%^&+=._])(?=\S+$).{8,16}$/,
				pattPhone: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
				loading: false,
				loadingCose: false,
				codeButton: "发送验证码",
				logonButton: "注册",
				countDown: 60,
				reckonByTime: null,
				active:1,
				aviationUser: {
					user_name: '',
					user_password: '',
					phone: '',
					confirmPassword: '',
					verificationCode: ''
				},
				rules: {
					confirmPassword: [{
						validator: validatePass2,
						trigger: 'blur'
					}],
					user_password: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					phone: [{
						validator: validatePhone,
						trigger: 'blur'
					}]
				}
			};
		},
		components: {
			Navigation,
			BottomNavigation
		},
		methods: {
			sendVerificationCode(formName) {
				this.$refs[formName].validateField('user_name', (valid) => {
					if (!valid) {
						if (this.reckonByTime === null) {
							var formData = new FormData();
							formData.append('user_name', this.aviationUser.user_name);
							axios.post("api/userAction/sendVerificationCode", formData)
								.then((res) => {
									if (res.data.code === 200) {
										this.reckonByTime = setInterval(() => {
											if (!this.loadingCose) {
												this.loadingCose = true;
												this.$message({
													message: '邮件已经发送，请注意查收！',
													type: 'success'
												});
											}
											this.countDown = this.countDown - 1;
											this.codeButton = this.countDown + "秒";
											if (this.countDown <= 0) {
												clearInterval(this.reckonByTime);
												this.reckonByTime=null;
												this.countDown = 60;
												this.loadingCose = false;
												this.codeButton = "发送验证码";
											}
										}, 1000);
									} else {
										this.$message({
											dangerouslyUseHTMLString: true,
											message: '<strong>' + res.data.msg + '</strong>',
											type: 'error'
										});
									}
								})
						}
					}
				});
				return false;
			},
			aviationLogon(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var formData = new FormData();
						formData.append('user_name', this.aviationUser.user_name);
						formData.append('user_password', this.aviationUser.user_password);
						formData.append('phone', this.aviationUser.phone);
						formData.append('verificationCode', this.aviationUser.verificationCode);
						axios.post("api/userAction/logon", formData)
							.then((res) => {
								if (res.data.code === 200) {
									this.active=2;
								} else {
									this.$message({
										dangerouslyUseHTMLString: true,
										message: '<strong>' + res.data.msg + '</strong>',
										type: 'error'
									});
								}
							})
					}
				});
				return false;
			}
		}
	}
</script>

<style>
</style>